<template>
  <div class="content">
    <heading grade='1'>上课情况( {{train_student_course_info.studentName}} )</heading>
    <div class="detail-top">
        <el-row>
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <p>班级名称：{{train_student_course_info.className}}</p>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <p>校区：{{train_student_course_info.schoolName}}</p>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <p>课程：{{train_student_course_info.courseName}}</p>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <p>上课时间：{{train_student_course_info.beginTime ? new Date(train_student_course_info.beginTime).format('yyyy.MM.dd') : ''}}-{{train_student_course_info.endTime ? new Date(train_student_course_info.endTime).format('yyyy.MM.dd') : ''}}</p>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <p>班别：{{train_student_course_info.classesName}}</p>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content bg-purple">   
              <p v-if="train_student_course_info.startStatus===0">开课状态：未上课</p>
              <p v-if="train_student_course_info.startStatus===1">开课状态：已上课</p>
              <p v-if="train_student_course_info.startStatus===2">开课状态：已结束</p>
            </div>
          </el-col>
        </el-row>
    </div>

    <div class="main">
      <div class="divide"></div>
      <div class="situation">
        <div class="detail">共 <span>{{train_course_time_count.count}}</span> 课时,课程已上 <span>{{train_course_time_count.overCount}}</span> 课时，学员已上 <span>{{train_course_time_count.studentOverCount}}</span> 课时，待补课 <span class="special">{{train_course_time_count.waitMakeupCount}}</span> 课时</div>
        <el-table
          :data="train_student_course.list"
          stripe
          style="width: 100%"
          :row-class-name="tableRowClassName">
          <el-table-column
            label="课时" 
            align="center"
            width="170">
            <template scope="scope">
              {{scope.$index + 1}}
            </template>
          </el-table-column>
          <el-table-column
            prop="subjectName"
            label="学科名称" 
            align="center" 
            width="160">
          </el-table-column>
          <el-table-column
            label="上课时间" 
            align="center" 
            width="130">
            <template scope="scope">
              {{scope.row.beginDate ? new Date(scope.row.beginDate).format('yyyy.MM.dd') : ''}} {{scope.row.beginWeekCode | getWeekDay}} {{new Date(scope.row.startTime).format('hh:mm')}}-{{new Date(scope.row.endTime).format('hh:mm')}}
            </template>
          </el-table-column>
          <el-table-column
            prop="address"
            label="上课地点" 
            align="center" 
            width="160">
          </el-table-column>
          <el-table-column
            label="上课情况">
            <template scope="scope">
              <span :class="[scope.row.status  === 2 ? special: '']" v-if="scope.row.status === 1">出勤</span>
              <span :class="[scope.row.status  === 2 ? special: '']" v-if="scope.row.status === 0"></span>
              <span :class="[scope.row.status  === 2 ? special: '']" v-if="scope.row.status === 2 && !scope.row.makeupSchedule">
                缺勤-待补课
              </span>
              <span v-if="scope.row.status === 2 && scope.row.makeupSchedule">
                <div :class="[scope.row.status  === 2 ? special: '']">缺勤</div>
                <div>
                  <div style="line-height:18px">【补课】 {{scope.row.makeupSchedule.className}}</div>
                  <div style="line-height:18px">{{scope.row.beginDate ? new Date(scope.row.beginDate).format('yyyy.MM.dd') : ''}} {{scope.row.beginWeekCode | getWeekDay}} {{new Date(scope.row.startTime).format('hh:mm')}}-{{new Date(scope.row.endTime).format('hh:mm')}}</div> 
                  <div style="line-height:18px">{{scope.row.address}}</div>
                </div>
              </span>
              <span :class="[scope.row.status  === 3 ? special: '']" v-if="scope.row.status === 3 && !scope.row.makeupSchedule">
                请假-待补课
              </span>
              <span v-if="scope.row.status === 3 && scope.row.makeupSchedule">
                <div :class="[scope.row.status  === 3 ? special: '']">请假</div>
                <div>
                  <div style="line-height:18px">【补课】 {{scope.row.makeupSchedule.className}}</div>
                  <div style="line-height:18px">{{scope.row.beginDate ? new Date(scope.row.beginDate).format('yyyy.MM.dd') : ''}} {{scope.row.beginWeekCode | getWeekDay}} {{new Date(scope.row.startTime).format('hh:mm')}}-{{new Date(scope.row.endTime).format('hh:mm')}}</div> 
                  <div style="line-height:18px">{{scope.row.address}}</div>
                </div>
              </span>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          v-bind="getPaginationProps(train_student_course)"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
          >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import {pagingList} from 'utils/mixins'
import { mapGetters } from 'vuex'
export default {
  mixins: [pagingList],
  computed: {
    ...mapGetters({
      train_student_course_info: 'train_student_course_info', // 学员详情
      train_student_course: 'train_student_course', // 学员在上课情况列表
      train_course_time_count: 'train_course_time_count' // 课时信息
    })
  },
  data () {
    return {
      special: 'special',
      query: this.getQuery()
    }
  },
  created () {
    this.$store.dispatch('train_student_course_info', {studentId: this.$route.query.studentId, classId: this.$route.query.classId})
    this.$store.dispatch('train_course_time_count', {studentId: this.$route.query.studentId, classId: this.$route.query.classId})
  },
  methods: {
    fetch (query) {
      let queryInit = Object.assign({studentId: this.$route.query.studentId, classId: this.$route.query.classId}, query)
      this.$store.dispatch('train_student_course', queryInit)
    },
    tableRowClassName (row, index) {
      if (row.status === 0) {
        return 'non-course'
      }
      return ''
    }
  }
}
</script>

<style lang="scss">
@import '~styles/var';
.content {
  .detail-top {
    .el-row {
      margin-top: 25px;
    }
  }
  .main {
    min-height: 100%;
    background: #fff;
    .divide {
      margin: 30px -60px 0;
      border-top: 20px solid $background-color;
    }
    .situation {
      margin-top: 30px;
      tbody {
        tr {
          font-size: 12px;
        }
      }
      .detail {
        span {
          font-weight: 900;
          font-size: 14px;
          &.special {
            color: red
          }
        }
      }
      .special {
        color: red
      }
      .el-table .non-course {
        // background: #c9e5f5;
        color: #999
      }
    }
  }
}
</style>
